<template>
    <div class="index">
        <Row class="background-light-primary main-nav">
            <Col span="6">
                <Icon type="ios-home" size="40"/>物业管理平台
            </Col>
            <Col span="12">
                <Input class="main-search" search enter-button="搜索" placeholder="搜索小区名/业务名称/电话号码" />
            </Col>
            <Col span="6" class="text-right">
                <Avatar :src="headImg" />
                欢迎：{{$user.userBaseInfo.custName}}
            </Col>
        </Row>
        <Row class="main-content">
            <Col span="3" class="main-content-nav">
                <div class="item-nav float-left" :class="{active:currenNavIndex==index}" @click="changePage(item.val,index)" v-for="(item,index) in NavList" :key="index">
                    <Icon type="md-home" size="20" v-if="index==0"/>
                    <Icon type="ios-people" size="20" v-if="index==1"/>
                    <Icon type="ios-podium" size="20" v-if="index==2"/>
                    <Icon type="ios-time" size="20" v-if="index==3"/>
                    {{item.label}}
                </div>
            </Col>
            <Col span="21" class="main-content-content">
                <component :is="currentView" :ref="currentView" class="main-content-right" @toPage="toPage"></component>
            </Col>
        </Row>
    </div>
</template>
<script type="text/ecmascript-6">
import headImg from '../../assets/images/user.jpg'//用户图片
import mainHome from './content'//首页
import people from '../owner'//业主
import village from '../village'//小区
import history from '../accessHistory'//出入历史
    export default {
        data() {
            return {
                viewIndex:0,
                currentView:'mainHome',
                headImg:headImg,
                currenNavIndex:0,
                NavList:[
                    {
                        label:'首页',
                        val:'mainHome',
                    },
                    {
                        label:'业主',
                        val:'people',
                    },
                    {
                        label:'小区',
                        val:'village',
                    },
                    {
                        label:'出入历史',
                        val:'history',
                    },
                ],
            }
        },
        mounted(){

        },
        components: {
            mainHome,
            people,
            village,
            history,
        },
        computed:{

        },
        methods: {
            changePage(pageName,index){
                this.currentView = pageName;
                this.currenNavIndex=index
            },
            //跳转至出入历史
            toPage(params){
                this.currentView=this.NavList[params.index].val
                this.currenNavIndex=params.index
                if(params.index==3){
                    setTimeout(()=>{
                        this.$refs.history.getTravelRecordData('',params.item.personName)
                    },0);
                }
            },
        }
    }
</script>
<style scoped lang="scss">
    .index{
        height: 100%;
        .main-nav{
            height: 80px;
            line-height: 80px;
            padding: 0 30px;
            color: #fff;
        }
        .main-search{
            margin-top: 24px;
        }
        .main-content{
            height: calc(100% - 80px);
            .main-content-nav{
                height: 100%;
                width: 9%;
                border-right: 1px solid #dcdee2;
                padding: 50px 18px;
                .item-nav{
                    width: 100%;
                    cursor: pointer;
                    padding: 20px 0;
                    margin: 10px 0;
                    &:first-child{
                        margin-top: 0;
                    }
                    &.active{
                        color: #2b85e4;
                    }
                }

            }
            .main-content-content{
                height: 100%;
                width: 91%;
                .main-content-right{
                    padding: 10px;
                }
            }
        }
    }
</style>
<style lang="scss">
    .main-tile{
        color: #5FCECA;
        padding-left:16px;
        margin: 10px 0;
        &:before{
            content: '';
            display: block;
            height: 21px;
            width: 2px;
            border: 1px solid #5FCECA;
            position: absolute;
            top: 0;
            left: 0;
        }
        &:first-child{
            margin-top: 0;
        }
    }
    .ivu-tabs-bar{
        margin-bottom: 0;
        border-bottom: none;
    }
</style>